<template>
	<view class="container" style="margin-bottom:25%;">
		<view>
			<view class="headTitle">选择助娱达人</view>
			<view class="headSearch">
				<view class="cityInfo">
					{{ipAddress.city}}市
					<!-- 	<text class="iconfont icon-xiangxiazhankai"></text> -->
				</view>
				<view class="inputBox">
					<input type="text" v-model="searchModal" placeholder="请输入助娱达人昵称" @input="searchInput()" />
				</view>
			</view>
		</view>
		<view class="tpBox">
			<view v-for="(tPitem,index) in talentType">
				{{tPitem}}
			</view>
		</view>
		<view class="card" v-for="(item,index) in playList" @tap="placeOrder(item)">
			<view style="flex: 1;display: flex;flex-direction: column;align-items: center;">
				<view>
					<image v-show="item.images[0].imgLoaded" lazy-load :src="item.images[0].url" mode="aspectFill" class="pwHeadImg"
						@load="changeImg(index)" @error="badImg(index)"></image>
					<image v-show="!item.images[0].imgLoaded" src="../../static/image/loading.gif"
						mode="aspectFill" class="pwHeadImg"></image>
				</view>
				<view>
					<view v-if="item.is_server" class="serviceState serviceState_ok">可服务</view>
					<view class="serviceState serviceState_error" v-else>暂不服务</view>
				</view>
			</view>
			<view class="pw_note">
				<view class="pw_detail">
					<view class="pw_detail_items">
						<view class="pw_detail_nickname">{{item.nickname}}</view>
						<view class="pw_detail_gender">
							<text v-if="item.sex=='男'" class="iconfont icon-nanxing1" style="color: #1F91F2;"></text>
							<text v-if="item.sex=='女'" class="iconfont icon-nanxing" style="color: #FF84A1;"></text>
							{{item.age}}
						</view>
					</view>
					<view v-if="item.city">
						<text class="iconfont icon-weizhi" style="color: #1AD566"></text>
						<text style="font-size: 28rpx;">{{item.city}}</text>
					</view>
				</view>
				<view class="pw_detail">
					<view style="flex: 2;">
						<view v-if="item.details">
							{{item.details}}
						</view>
						<view v-else>
							<view>{{item.conste}}</view>
							<view>{{item.intro}}</view>
						</view>
					</view>

					<view class="priceBox">
						<view class="priceWrapper">
							<image src="/static/image/cbnew.png" mode="widthFix" style="width: 52rpx;">
							</image>
							<text class="priceWrapper_value">{{item.price}}</text> /小时
						</view>
						<view>{{item.start_hour}}小时起</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="showEnd" style="padding: 20px;text-align: center;color: #959090;">到底了哦,亲~</view>
		<view v-if="playList.length<=0" style="text-align: center;margin: 80rpx;color: #949596;font-size: 35rpx;">
			当前暂未找到任何陪玩信息</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				talentType: ["才艺助娱达人"],
				searchModal: ""
			}
		},
		props: {
			ipAddress: {
				type: Object
			},
			userInfo: {
				type: Object
			},
			playList: {
				type: Array
			},
			showEnd :{
				typeof:Boolean,
				default:false
			}
		},
		onLoad() {
			this.searchInput()
		},
		methods: {
			changeImg(index) {
				this.$emit('imageLoad',index);
			},
			badImg(index){
				console.log("================第" + index + "张图片加载失败================")
				this.$emit('badImg',index);
			},
			async searchInput() {
				this.$emit("searchInput", this.searchModal)
			},
			// 去添加微信
			goAddWeixi() {
				let data = {
					address: this.cityText,
					data: this.date + ' ' + this.time,
					time: this.hour,
					do: this.checkboxText,
					price: this.moneyCon
				}
				this.$store.commit('setReleaseData', data);
				this.$emit('goAddWeixi', data)
			},
			placeOrder(item) {
				uni.setStorageSync("playUser", item)
				uni.navigateTo({
					url: "/pages/index/index?address=" + this.address
				})

			},
		}
	}
</script>

<style scoped>
	.pwTypeImg {
		width: 60rpx;
		box-sizing: border-box;
	}
	
	.pwHeadImg {
		width: 140rpx;
		height: 140rpx;
	}
	
	.container {
		background-color: #F8F8F8;
		min-height: 100vh;
	}

	.tpBox {
		display: flex;
		margin: 10rpx;
		font-size: 36rpx;
		gap: 25rpx;
		font-weight: 600;
	}

	.cityInfo {
		color: #fff;
		margin-left: 15rpx;
	}

	.headSearch {
		display: flex;
		align-items: center;
		background-color: #FA97B4;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
	}

	.inputBox {
		background-color: #fff;
		margin: 30rpx 20rpx;
		width: 70%;
		border-radius: 30rpx;
		padding: 20rpx;
	}

	.headTitle {
		background-color: #A08FEE;
		color: #fff;
		font-size: 36rpx;
		padding: 30rpx;
		text-align: center;
		font-weight: 800;
	}

	.card {
		background: #fff;
		box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
		width: 95%;
		margin: auto;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		display: flex;
		margin: 45rpx auto;
	}
	.pw_note {
		flex: 3;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: revert;
	}

	.pw_detail {
		display: flex;
		justify-content: space-between;
		color: #595959;
	}

	.pw_detail_items {
		display: flex;
	}

	.pw_detail_nickname {
		font-size: 35rpx;
		font-weight: 700;
	}

	.pw_detail_gender {
		padding: 0 10rpx;
		margin: 5rpx 15rpx;
		background-color: #e8e7e4;
		border-radius: 15rpx;
		box-sizing: border-box;
	}

	.priceWrapper {
		font-size: 34rpx;
		white-space: nowrap;
		color: red;
		display: flex;
		flex-direction: unset;
		align-items: center;
	}

	.priceWrapper_value {
		font-size: 48rpx;
		font-weight: 700;
	}

	.priceBox {
		flex: 1;
		text-align: right;
	}

	.serviceState {
		padding: 6rpx 30rpx;
		border-radius: 30rpx;
		color: #fff;
		white-space: nowrap;
		font-size: 25rpx;
	}

	.serviceState_ok {
		background-color: #FF3F6E;
	}

	.serviceState_error {
		background-color: #cac5c5;
	}
</style>